<template>
	<view class="warter-search full box relative bg-primary flex-col">
		<view class="search-wrapper">
			<view class="search-inner">
				<u-icon class="search-icon" size='44rpx' color="#B3B9C0" name="search"></u-icon>
				<input class="search-input" v-model="keyword" @confirm="handleSearch" placeholder="请输入搜索内容" />
				<view class="search-btn" @click="handleSearch">
					<text>搜索</text>
				</view>
			</view>
		</view>
		<view class="w-wrap">
			<view class="w-inner">
				<mescroll-uni @init="mescrollInit" :fixed="false" @down="downCallback" @up="upCallback">
					<view class="record-list">
						<view class="record-item" v-for="(item,index) in list" :key="index">
							<view class="record-left">
								<view class="address-name">{{ item.name }}</view>
								<view class="update-time">更新时间:{{ item.update_time }}</view>
							</view>
							<view class="record-right">
								<view class="record-value">{{ item.value }}</view>
								<view class="right-label">原水平均TDS</view>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import { request } from "@/utils/tool";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				keyword: "",
				list: []
			}
		},
		methods: {
			handleSearch() {
				this.mescroll.triggerDownScroll()
			},
			async initData(page, limit) {
				const { keyword } = this
				const resp = await request({
					url: "/shuizhi/lists",
					method: "GET",
					data: {
						page_no: page,
						page_size: limit,
						keyword
					}
				})
				const { lists, count } = resp.data
				if (page === 1) this.list = []
				this.list.push(...lists)
				this.mescroll.endBySize(lists.length, count)
			},
			upCallback(ev) {
				const { num, size } = ev
				this.initData(num, size)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warter-search {
		.record-list {
			padding: 16rpx 26rpx;

			.record-item {
				padding: 18rpx 20rpx;
				background: #FFFFFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.record-right {
					.record-value {
						font-weight: 400;
						font-size: 36rpx;
						color: #FF0000;
						line-height: 48rpx;
					}

					.right-label {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 48rpx;
					}
				}

				.record-left {
					.update-time {
						font-weight: 400;
						font-size: 26rpx;
						color: #999999;
						line-height: 48rpx;
					}

					.address-name {
						font-weight: 400;
						font-size: 30rpx;
						color: #000000;
						line-height: 48rpx;
					}
				}
			}
		}

		.search-wrapper {
			padding: 16rpx 26rpx;
			box-sizing: border-box;
			position: relative;

			.search-inner {
				padding: 8rpx 8rpx 8rpx 32rpx;
				box-sizing: border-box;
				position: relative;
				display: flex;
				align-items: center;
				background: #fff;
				border-radius: 62rpx 62rpx 62rpx 62rpx;

				.search-btn {
					margin-left: auto;
					width: 129rpx;
					height: 58rpx;
					background: linear-gradient(90deg, #8CAEE4 0%, #0565FF 100%);
					border-radius: 29rpx 29rpx 29rpx 29rpx;
					text-align: center;
					line-height: 58rpx;
					font-size: 26rpx;
					color: #FFFFFF;
				}

				.search-input {
					font-size: 32rpx;
					width: 440rpx;
					margin-left: 16rpx;
					height: 48rpx;
				}

				.search-icon {}
			}
		}
	}
</style>